<template>
	<div class="customer-dialog">
	  <el-dialog    
	    :title="title"
		v-model="visible"
		custom-class="dialog"
	    width="52.5%"
	  >
	    <el-form
		  id="exPDF"
	      ref="form"
	      class="customer-form"
	      :model="form"
	      label-width="97px"
	      :inline="true"
	      :rules="dataRule"
	      label-suffix=":"
	    >
	      <el-form-item label="患者姓名" class="form-style">
	        <el-input v-model.trim="form.name" placeholder="请输入" maxlength="30" size="small" class="input-style" />
	      </el-form-item>
	      <el-form-item label="医生姓名" class="form-style">
	        <el-input v-model.trim="form.doctor" placeholder="请输入" maxlength="30" size="small" class="input-style" />
	      </el-form-item>
	      <el-form-item label="诊断结果" class="form-style">
	        <el-input v-model.trim="form.diagnosis" placeholder="请输入" maxlength="30" size="small" class="input-style" />
	      </el-form-item>
			
		<div v-for="(item, index) in form.rpList" :key="index" style="height: 100px">
		  <el-form-item label="药名" placeholder="请输入" class="form-style">
		    <el-input v-model="item.name" size="small" class="input-style" />
		  </el-form-item>
		  <el-form-item label="数量" placeholder="请输入" class="form-style">
		    <el-input v-model="item.num" size="small" class="input-style" />
		  </el-form-item>
		  <el-form-item label="用量" placeholder="请输入" class="form-style">
		    <el-input v-model="item.spec" size="small" class="input-style" />
		  </el-form-item>
		  <el-form-item label="用法" placeholder="请输入" class="form-style">
		    <el-input v-model="item.method" size="small" class="input-style" />
		  </el-form-item>
		</div>
			
	    </el-form>
		<div slot="footer" class="dialog-footer">
		  <el-button @click="exportToPDF">导出为PDF</el-button>
		</div>
	    <div slot="footer" class="dialog-footer">
	      <el-button @click="visible = false">取消</el-button>
	    </div>
	  </el-dialog>
	</div>

</template>

<script>
import htmlPdf from '../utils/pdf';
export default {
	data: function() {
		return {
			visible: false,
			
            form: {
				registrationId: null,
				uuid: '',
				name: null,
				sex: null,
				age: null,
				deptSub: null,
				diagnosis: null,
				rpList: [],
				doctor: null
            },
            dataRule: {
                
            }
        };
	},
	methods: {
		reset: function() {
		    let form = {
		        uuid: '',
		        name: null,
		        sex: null,
		        age: null,
		        deptSub: null,
		        diagnosis: null,
		        rpList: [],
		        doctor: null
		    };
		    this.form = form;
		},
		init: function(registrationId) {
		    let that = this;
		    //重置表单控件
		    that.reset();
		    //如果id是undefined，就对模型层id变量赋值为0
		    that.form.registrationId = registrationId;
		    //显示对话框
		    that.visible = true;
		    		  
		    //DOM渲染操作要放在$nextTick函数中执行，例如加载数据
		    that.$nextTick(() => {
		        //清理前端验证结果
		        that.$refs['form'].resetFields();
		      
		        //下方是新添加的内容
		        if (that.form.registrationId) {
		            that.$http('/prescription/searchPrescriptionByRegistrationId', 'POST', { registrationId: registrationId }, true, function(resp) {
		                let result = resp.result;
						that.form.uuid = result.uuid;
		                that.form.name = result.patientName;
		                that.form.sex = result.patientSex;
		                that.form.age = result.patientAge;
		                that.form.deptSub = result.deptSub;
		                that.form.diagnosis = result.diagnosis;
		                that.form.rpList = result.rp;
		                that.form.doctor = result.doctorName;
		            });
		        }
		    });
		},
		outHandle: function(id) {
		    
		},
		exportToPDF() {
			var TypeName = 'XXX医务室';
			htmlPdf(TypeName,document.querySelector('#exPDF'))
		}
	}
};
</script>

<style lang="scss">
  .customer-dialog{
    .customer-form{
      height: 320px;
      overflow-y: auto;
      overflow-x: hidden;
    }
    .address{
        .el-form-item__content{
          width: 89%;
        }
        .el-input__inner{
          width: 100%;
        }
    }
    .form-style{
      margin-bottom: 30px;
      .input-style{
        width: 215px;
      }
      .special-style{
        width: 194px;
      }
    }
    /**滚动条的宽度*/
    ::-webkit-scrollbar {
      width: 8px;
    }
    //滚动条的滑块
    ::-webkit-scrollbar-thumb {
      background-color: #ccc;
      border-radius: 5px;
    }
  }
</style>

